<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="diaMethodVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      v-elDragDialog
    >
      <el-form :model="rulecirculateForm" ref="rulecirculateForm">
        <el-row :gutter="20">
          <el-button
            type="primary"
            style="margin-left: 44.5%"
            @click="handleAddTion"
            size="mini"
            >添加方法注解</el-button
          >
          <div
            v-for="(list, index) in rulecirculateForm.methodAnnotation"
            :key="index"
          >
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-form-item
                  label="方法注解："
                  :prop="`methodAnnotation[${index}]`"
                >
                  <div style="position: relative">
                    <el-input
                      v-model.trim="rulecirculateForm.methodAnnotation[index]"
                      clearable
                      placeholder="请输入方法注解"
                    />
                    <i
                      class="el-icon-remove"
                      style="
                        font-size: 20px;
                        color: #409eff;
                        cursor: pointer;
                        position: absolute;
                        top: 24px;
                      "
                      @click="handleTionDelete(index)"
                    ></i>
                  </div>
                </el-form-item>
              </div>
            </el-col>
          </div>

          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item
                label="方法描述："
                prop="methodDesc"
                :rules="[
                  {
                    required: true,
                    message: '请输入方法描述',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model.trim="rulecirculateForm.methodDesc"
                  clearable
                  placeholder="请输入方法描述"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="方法类型" prop="methodType" required>
                <el-select
                  v-model="rulecirculateForm.methodType"
                  placeholder="请选择方法类型"
                  :disabled="$parent.classType === 'SERVICE_I'"
                >
                  <el-option
                    v-for="item in circulateLissts"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item
                label="方法名："
                prop="methodName"
                :rules="[
                  {
                    required: true,
                    message:
                      '请输入方法名，第一个字符必须是字母，后面的字符如果有必须是字母或数字',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model.trim="rulecirculateForm.methodName"
                  clearable
                  placeholder="请输入方法名，第一个字符必须是字母，后面的字符如果有必须是字母或数字"
                  @input="
                    (value) =>
                      (rulecirculateForm.methodName = value
                        ? value[0].replace(/[^a-zA-Z]/g, '') +
                          value.slice(1).replace(/[^0-9a-zA-Z]/g, '')
                        : '')
                  "
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="rulecirculateForm.returnType === 'List' ? 8 : 12">
            <div class="grid-content bg-purple-light">
              <el-form-item
                label="方法访问权限"
                prop="methodAccessModifier"
                required
              >
                <el-select
                  v-model="rulecirculateForm.methodAccessModifier"
                  placeholder="请选择方法访问权限"
                >
                  <el-option
                    v-for="item in ModifierLists"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="rulecirculateForm.returnType === 'List' ? 8 : 12">
            <div class="grid-content bg-purple-light">
              <el-form-item
                label="返回类型"
                prop="return_Type"
                :rules="commonRules($parent.addMethodReturnType)"
              >
                <myElAutocomplete
                  :form="rulecirculateForm"
                  attributeName="return_Type"
                  :seleteLists="$parent.addMethodReturnType"
                  @inputEvent="handleReturnTypeChange"
                  valuekey="Label_Desc"
                  placeholder="请选择返回类型"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8" v-if="rulecirculateForm.returnType === 'List'">
            <div class="grid-content bg-purple-light">
              <el-form-item
                label="集合元素类型："
                prop="element_Type"
                :rules="commonRules($parent.elementLists)"
              >
                <myElAutocomplete
                  :form="rulecirculateForm"
                  attributeName="element_Type"
                  :seleteLists="$parent.elementLists"
                  @inputEvent="handleReturnElement"
                  valuekey="Label_Desc"
                  placeholder="请选择集合元素类型"
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <div style="text-align: center">
          <el-button
            icon="el-icon-circle-plus"
            type="primary"
            @click="handleAddParmes"
            >添加方法参数</el-button
          >
        </div>
        <div>
          <el-row
            :gutter="20"
            v-for="(item, index) in rulecirculateForm.params"
            :key="index"
          >
            <el-col :span="item.paramsType === 'List' ? 6 : 8">
              <div class="grid-content bg-purple">
                <el-form-item
                  :prop="`params.${index}.paramsName`"
                  label="接收参数名称"
                  :rules="[
                    {
                      required: true,
                      message: '请输入接收参数名称',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    v-model.trim="item.paramsName"
                    placeholder="请输入接收参数名称，第一个字符必须是字母，后面的字符如果有必须是字母或数字"
                    clearable
                    @input="
                      (value) =>
                        (item.paramsName = value
                          ? value[0].replace(/[^a-zA-Z]/g, '') +
                            value.slice(1).replace(/[^0-9a-zA-Z]/g, '')
                          : '')
                    "
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="item.paramsType === 'List' ? 6 : 8">
              <div class="grid-content bg-purple">
                <el-form-item
                  :prop="`params.${index}.paramsAnnotation`"
                  label="参数注解"
                >
                  <el-input
                    v-model.trim="item.paramsAnnotation"
                    placeholder="请输入参数注解"
                    clearable
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="item.paramsType === 'List' ? 6 : 8">
              <div class="grid-content bg-purple-light">
                <el-form-item
                  label="类型"
                  :prop="`params.${index}.params_Type`"
                  :rules="commonRules($parent.leixingLists)"
                >
                  <div style="position: relative">
                    <myElAutocomplete
                      :form="item"
                      attributeName="params_Type"
                      :seleteLists="$parent.leixingLists"
                      @inputEvent="(val) => handleParamsChange(val, item)"
                      valuekey="Label_Desc"
                      placeholder="请选择类型"
                    />
                    <i
                      class="el-icon-remove"
                      style="
                        font-size: 20px;
                        color: #409eff;
                        cursor: pointer;
                        position: absolute;
                        top: 24px;
                      "
                      v-show="item.paramsType !== 'List'"
                      @click="handleDelete(index)"
                    ></i>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6" v-if="item.paramsType === 'List'">
              <div class="grid-content bg-purple-light">
                <el-form-item
                  label="集合元素类型："
                  :prop="`params.${index}.element_Type`"
                  :rules="commonRules($parent.elementLists)"
                >
                  <myElAutocomplete
                    :form="item"
                    attributeName="element_Type"
                    :seleteLists="$parent.elementLists"
                    @inputEvent="(val) => handleElement(val, item)"
                    valuekey="Label_Desc"
                    placeholder="请选择集合元素类型"
                  />
                  <i
                    class="el-icon-remove"
                    style="
                      font-size: 20px;
                      color: #409eff;
                      cursor: pointer;
                      position: absolute;
                      top: 24px;
                    "
                    v-show="item.paramsType === 'List'"
                    @click="handleDelete(index)"
                  ></i>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleaddSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

  <script>
import { componentCreateMethod } from "@/api/lowcode";
import myElAutocomplete from "../commonComponents/myElAutocomplete.vue";
export default {
  props: {
    diaMethodVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: { myElAutocomplete },
  data() {
    return {
      title: "增加方法",
      rulecirculateForm: {
        methodAnnotation: [""],
        methodType: "ABSTRACT",
        methodAccessModifier: "public",
        returnType: "String",
        return_Type: "String | 字符串",
        params: [],
      },
      ModifierLists: ["public", "protected"],
      typeIndex: undefined,
    };
  },
  computed: {
    circulateLissts() {
      if (this.$parent.classType !== "SERVICE_I") {
        this.rulecirculateForm.methodType = "COMMON";
        return ["COMMON", "STATIC"];
      }
    },
  },
  methods: {
    handleParamsChange(value, item) {
      if (value === "+") {
        this.$store.state.user.objServicedelog = true;
        item.params_Type = "";
        item.paramsType = "";
      } else {
        const obj = this.$parent.leixingLists.find(
          (item) => item.Label_Desc === value
        );
        if (obj) {
          item.paramsType = obj.value;
        } else {
          item.paramsType = value;
        }
        if (value === "List | 集合列表") {
          this.$set(
            item,
            "element_Type",
            this.$parent.elementLists[0]?.Label_Desc ?? ""
          );
          this.$set(
            item,
            "elementType",
            this.$parent.elementLists[0]?.value ?? ""
          );
        } else {
          this.$set(item, "element_Type", "");
          this.$set(item, "elementType", "");
        }
      }
    },
    handleElement(value, item) {
      if (value === "+") {
        this.$store.state.user.objServicedelog = true;
        item.element_Type = "";
        item.elementType = "";
      } else {
        const obj = this.$parent.elementLists.find(
          (item) => item.Label_Desc === value
        );
        if (obj) {
          item.elementType = obj.value;
        } else {
          item.elementType = value;
        }
      }
    },
    handleReturnTypeChange(value) {
      if (value === "+") {
        this.$store.state.user.objServicedelog = true;
        this.rulecirculateForm.return_Type = "";
        this.rulecirculateForm.returnType = "";
      } else {
        const obj = this.$parent.addMethodReturnType.find(
          (item) => item.Label_Desc === value
        );
        if (obj) {
          this.rulecirculateForm.returnType = obj.value;
        } else {
          this.rulecirculateForm.returnType = value;
        }
        if (value === "List | 集合列表") {
          this.$set(
            this.rulecirculateForm,
            "element_Type",
            this.$parent.elementLists[0]?.Label_Desc ?? ""
          );
          this.$set(
            this.rulecirculateForm,
            "elementType",
            this.$parent.elementLists[0]?.value ?? ""
          );
        } else {
          this.$set(this.rulecirculateForm, "element_Type", "");
          this.$set(this.rulecirculateForm, "elementType", "");
        }
      }
    },
    handleReturnElement(value) {
      if (value === "+") {
        this.$store.state.user.objServicedelog = true;
        this.rulecirculateForm.element_Type = "";
        this.rulecirculateForm.elementType = "";
      } else {
        const obj = this.$parent.elementLists.find(
          (item) => item.Label_Desc === value
        );
        if (obj) {
          this.rulecirculateForm.elementType = obj.value;
        } else {
          this.rulecirculateForm.elementType = value;
        }
      }
    },

    returnChange(value) {
      if (value === "+") {
        this.$store.state.user.objServicedelog = true;
      }
    },
    handleClose() {
      this.$parent.diaMethodVisible = false;
      // this.$parent.activeIndex=undefined
    },
    handleDelete(index) {
      this.rulecirculateForm.params.splice(index, 1);
    },
    handleAddTion() {
      this.rulecirculateForm.methodAnnotation.push("");
    },
    handleTionDelete(index) {
      if (this.rulecirculateForm.methodAnnotation.length > 1) {
        this.rulecirculateForm.methodAnnotation.splice(index, 1);
      }
    },
    handleAddParmes() {
      this.rulecirculateForm.params.push({
        paramsType: "String",
        params_Type: "String | 字符串",
      });
    },
    handleaddSave() {
      this.$refs.rulecirculateForm.validate(async (valid) => {
        if (valid) {
          const rulecirculateForm = JSON.parse(
            JSON.stringify(this.rulecirculateForm)
          );
          rulecirculateForm.classId = this.$parent.returnClassId();
          if (rulecirculateForm.returnType === "List") {
            rulecirculateForm.returnType = `${rulecirculateForm.returnType}<${rulecirculateForm.elementType}>`;
          }
          rulecirculateForm.params?.forEach((item) => {
            if (item.paramsType === "List") {
              item.paramsType = `${item.paramsType}<${item.elementType}>`;
            }
          });
          let url =
            this.title === "增加方法"
              ? "/component/create_method"
              : "/component/update_method";
          const res = await componentCreateMethod(rulecirculateForm, url);
          if (res?.code === 200) {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.handleClose();
            await this.$parent.componentClassjson();
            if (this.title === "编辑方法") {
              if (this.$parent.activeIndex.endsWith("方法编辑")) {
                const idx = this.$parent.activeIndex.slice(0, -2) + "高亮";
                this.$parent.handlemethodsEdit(
                  idx,
                  this.$parent.addBasicObj.item
                );
              }
            }
          }
        }
      });
    },
  },
};
</script>

  <style lang="scss" scoped>
</style>
